<template>
    <div class="reference-source" v-if="references && references.length > 0">
        <div>参考来源：</div>
        <div v-for="(sItem, sIndex) in references" :key="sIndex">
            <!--   sItem.type === 2 -->
            <v-button v-if="getReferenceType(sItem.type) === 'DOC'" type="link" kind="primary" @click="openSourceDrawer(references, sIndex)">
                <v-icon remote name="basic_papers_line"></v-icon>
                {{ sItem.name || sItem.title }}
                <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
            </v-button>
            <v-button v-else-if="getReferenceType(sItem.type) === 'SEARCH'" type="link" kind="primary" @click="openSearchUrl(sItem, sIndex)">
                <v-icon remote name="basic_url_line"></v-icon>
                {{ sItem.id }}.{{ isMobile ? formattedEllipsis(sItem.name || sItem.title, 15) :
                formattedEllipsis(sItem.name || sItem.title) }}
                <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
            </v-button>
            <v-button v-else type="link" kind="primary" @click="openSourceDrawer(references, sIndex)">
                <v-icon remote name="basic_q_a_line"></v-icon>
                {{ sItem.name || sItem.title }}
                <v-icon remote name="arrow_right_line" size="12" valign="-1"></v-icon>
            </v-button>
        </div>
    </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
// import { TOKENS_STATUS } from '@/constants';
// import { isJSON, convertToCapitalizedCamelCase, isEmpty } from '@/utils/util';
import { replaceLinks, formattedEllipsis } from '@/utils';

import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
export default {
    components: {
        VueMarkdown,
        VueJsonPretty
    },
    data () {
        return {
            references: []
            // isOpen: true
            // TOKENS_STATUS,
        };
    },
    props: {
        referencesList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
    },
    methods: {
        replaceLinks,
        // isEmpty,
        formattedEllipsis,
        getReferenceType (type) {
            // 参考来源类型 1-QA  2-文档 4-search 分三类展示 default展示search
            switch (type) {
            case 1:
                return 'QA';
            case 2:
                return 'DOC';
            case 4:
            default:
                return 'SEARCH';
            }
        },
        openSearchUrl (refer, index) {
            console.error('【reference】', refer, index);
            window.open(refer.url);
        },
        openSourceDrawer (refers, index) {
            if (this.webIMSource === 'manage' || this.isExperience) {
                const payload = JSON.stringify({
                    from: 'webim',
                    type: 'audit-reference',
                    record: refers,
                    openId: refers[index].ids[0],
                    openIndex: index
                });
                window.parent.postMessage(payload, '*');
            } else {
                // const url = refers[index].url;
                // url && window.open(url);
                // console.log(2333333333, refers, index);
                this.$emit('openBottomDrawer', true, refers[index]);
            }
        },
        formatteReference (references) {
            let res = references;
            if (references && references.length > 0) {
                res = references.reduce((result, item) => {
                    if (this.getReferenceType(item.type) === 'DOC') {
                        const existingItem = result.find(
                            (i) => i.doc_id === item.doc_id && i.type === item.type
                        );
                        if (existingItem) {
                            existingItem.ids.push(item.id);
                        } else {
                            result.push({ ...item, ids: [item.id] });
                        }
                    } else {
                        result.push({ ...item, ids: [item.id] });
                    }
                    return result;
                }, []);
            }
            return res;
        }
    },
    watch: {
        referencesList: {
            handler (val, oldValue) {
                console.log('【references】', val);
                let refer = this.formatteReference(val);
                this.references = refer;
                console.log('【references】res', refer);
            },
            immediate: true // 立即触发handler函数
        }
    },
    created () {
    },
    mounted () {
    }
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.isShow {
  // border-radius: var(--radius-large);
}

.reference-source {
  margin: 12px 0;
  font-size: 14px;
  color: var(--color-text-caption);
  text-align: left;

  .v-button {
    text-decoration: none;
    text-align: left;
  }
}
</style>
